<template>




  <div class="guide" />

  <div>
    <el-menu
        :default-active="activeIndex"
        ref="el-menu"
        class="el-menu-demo"
        text-color="#fff"
        background-color="transparent"
        mode="horizontal"
        @select="handleSelect"
        id="menu"
    >



      <el-menu-item    index="1" style="margin-left:400px;font-size: 18px" ><a href="guide"   @click="iframeDown" target="Frame"  style="text-decoration: none">导航</a></el-menu-item>
      <el-menu-item    index="2" style="font-size: 18px" ><a href="hello"   @click="iframeUp" target="Frame"  style="text-decoration: none">首页</a></el-menu-item>

      <el-menu-item  class="el-menu-item"   index="3"><a :href="friendGuide"    @click="iframeDown"  target="Frame" style="text-decoration: none;font-size: 18px">私信</a></el-menu-item>

      <el-menu-item index="4"><a :href="zone" target="Frame"   @click="iframeDown" style="text-decoration: none;font-size: 18px">动态</a></el-menu-item>


      <el-sub-menu index="5-n"  style="margin-left: 200px;background-color: transparent" >
        <template #title><Bell style="width: 1.8em; height: 1.8em;"/></template>
        <el-menu-item class="message-operate" ><div style="color: #888888"><el-icon><Promotion /></el-icon>{{tip}}</div></el-menu-item>

        <div v-show="read"  v-for="i in commentName_array.length" :key="i" class="message-tip">
          <el-menu-item><div style="color: #888888">{{commentName_array[i-1]}}&nbsp;评论了你的动态:&nbsp; {{comment_array[i-1]}}</div></el-menu-item>
        </div>
      </el-sub-menu>

      <!--            私信显示区   -->
      <el-sub-menu index="6-n"  style="margin-left: 20px; " >
        <template #title><el-icon><ChatRound  ref="message-logo"  id="message-logo" style="width: 1.5em; height: 1.3em;" class="blink"/></el-icon></template>

        <!--        已读按钮-->
        <el-menu-item class="message-operate" @click="BeenRead"><div style="color: #888888"><el-icon><Promotion /></el-icon>{{tip}}</div></el-menu-item>
        <div v-show="read" :index="6-i" v-for="i in sender_array.length" :key="i" class="message-tip">
          <el-menu-item  @click="chat(senderAdmin_array[i-1],sender_array[i-1])"> <div style="color:#888888;"><avatar-component :size="35" :user-name="senderAdmin_array[i-1]"></avatar-component> &nbsp; {{sender_array[i-1]}}:&nbsp; {{massage_array[i-1]}}</div></el-menu-item>
        </div>
      </el-sub-menu>
      <!--头像区-->
      <avatar-component ref="avatar" id="avatar" @mouseenter="down" @mouseleave="up" :size="60"  class="avatar" @click="drawer=true" :user-name="username"></avatar-component>
    </el-menu>
  </div>

  <div class="frame">

    <iframe    ref="iframe"  :src="hello"  name="Frame" style="width: 100%;height:800px; border: none; " id="i1">
    </iframe>
  </div>



<!--  弹窗区域-->
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
<!--    <el-image :src="url"></el-image>-->
    <div class="drawer-head">
      <img alt="Vue logo" ref="logo" src='../assets/absolute_background.jpeg' style="height: 250px;width:480px">
    </div>
    <avatar-component :user-name="username"></avatar-component>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>个人资料</span>
          <el-button class="button" text @click="showEditBox =true">编辑</el-button>
        </div>
      </template>
   <div  class="card-body text item" >
     <span  style="float: left">姓名：{{name}}</span><br><br>
     <span style="float: left">年龄：{{age}}</span><br><br>
      <span style="float: left">性别：{{sex}}</span><br><br>
     <span style="float: left">电话：{{phone}}</span><br><br>
      <span style="float: left">备注：{{note}}</span><br>
   </div>
    </el-card>
    <br>
    <br>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>账户设置</span>
          <el-button class="button" text @click="showPasswordBox =true">修改密码</el-button>
          <el-button class="button" text @click="AccountCancellation">注销</el-button>
        </div>
      </template>
      <div class="card-body text item">
        <span style="float: left">账号：{{username}}</span><br><br>
        <span style="float: left">密码：******</span><br><br>
       <span style="float: left">绑定号码:略</span><br>
      </div>
    </el-card><br><br>
    <el-button type="danger" @click="loginOut()">退出登录</el-button>
  </el-drawer>


  <el-dialog v-model="showEditBox" style="width: 500px">
    <h2>资料修改</h2>
    <div>
      姓名： <el-input v-model="name" style="width: 100px"></el-input>
      年龄：<el-input v-model="age" style="width: 100px"></el-input><br><br>
      性别：<el-select placeholder="性别选择" v-model="sex" style="width: 100px">
      <el-option value="男"></el-option>
      <el-option  value="女 "></el-option>
    </el-select>
      电话：<el-input v-model="phone" style="width: 100px"></el-input><br><br>
      备注：<el-input type="textarea" placeholder="写点什么吧，让其他人更了解你" v-model="note" style="width: 300px"></el-input><br><br>
      <el-button type="primary" @click=updateUser() >确定</el-button>
      <el-button  @click="showEditBox=false">取消</el-button>
    </div>
  </el-dialog>

  <el-dialog v-model="showPasswordBox">
    <h1>密码设置</h1>
<!--    账号：{{username}}<br>-->
    旧密码：   <el-input
      type="password"
      placeholder="Please input password"
      show-password
      @input="change($event)"
      v-model="previousPassword_input"
      style="width: 300px"
  /><br><br>
    新密码：<el-input
      type="password"
      placeholder="Please input password"
      show-password
      @input="change($event)"
      v-model="newPassword_1"
      style="width: 300px"
  /><br><br>
    确认密码：<el-input
      type="password"
      placeholder="Please input password"
      show-password
      @input="change($event)"
      v-model="newPassword_2"
      style="width: 300px"
  /><br><br>

    <el-button type="primary" @click=updatePassword>确定</el-button>
    <el-button  @click="showPasswordBox=false">取消</el-button>
  </el-dialog>

  <el-dialog v-model="showMassageBox" :title="senderName" style="background-color: #F5F3F5;width: 530px">
    <div class="box-chat1">
      <div class="box-chat1-left">
        <div v-for="i in senderMassage_array.length" :key="i" style="border: none; height: 60px" >
          <avatar-component  :size="35" :user-name="senderAdmin" style="float: left"></avatar-component>
          <div  class="pop" >
            <div class="arrow"></div>
            {{senderMassage_array[i-1]}}
          </div>
        </div>
      </div>
      <div class="box-chat1-right">
        <div  v-for="i in receiverMassage_array.length" :key="i" style="border: none;height: 60px">
          <avatar-component  :size="35" :user-name="username" style="float: right"></avatar-component>
          <div  class="pop2">
            <div class="arrow2"></div>
            {{receiverMassage_array[i-1]}}
          </div>
        </div>
        <div  v-for="i in now_edit_massage.length" :key="i" style="border: none;height: 60px">
          <avatar-component  :size="35" :user-name="username" style="float: right"></avatar-component>
          <div  class="pop2">
            <div class="arrow2"></div>
            {{now_edit_massage[i-1]}}
          </div>
        </div>
      </div>
    </div>

    <div class="box-chat2">
      <textarea class="box-text" v-model="massage_text"></textarea>
      <el-button type="primary" @click="send">发送</el-button>
    </div>
  </el-dialog>


</template>

<script>
import AvatarComponent from "@/components/AvatarComponent";
import axios from "axios";
import {ElMessage} from "element-plus";
export default {
  components: {AvatarComponent},



  data() {
    return {
      zone: '',
      hello:'',
      friendGuide:"",

      id:'',
      username: '',
      previousPassword_input:"",
      previousPassword:"",
      name: '',
      sex: '',
      phone: '',
      note: '',
      newPassword_1:'',
      newPassword_2:'',
      age:"",

      tip:"全部已读",
      read:true,
      sender_array:[],
      massage_array:[],
      senderAdmin_array:[],

      commentName_array:[],
      comment_array:[],
      drawer: false,

      showMassageBox:false,
      showEditBox:false,
      showPasswordBox:false,
      senderName:"",
      senderAdmin:"",
      senderMassage_array:[],
      receiverMassage_array:[],

      massage_text:"",
      now_edit_massage:[],
      dialogTableVisible:false
      // url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'


    }

  },
  methods: {
    iframeUp(){
      this.$refs.iframe.style.marginTop="-30px"
      document.getElementById("menu").style.backgroundColor="transparent"

    },
    iframeDown(){
      this.$refs.iframe.style.marginTop="70px"
      document.getElementById("menu").style.backgroundColor="#C0C0C0"


    },
    updateUser(){
      this.showEditBox=false
      ElMessage({
        message: '修改资料成功',
        type: 'success',
      })
      axios({
        method: 'post',
        url: 'http://localhost:8081/updateUser',
        params: {
          userName:this.username,
          name:this.name,
          age:this.age,
          sex:this.sex,
          phone:this.phone,
          note:this.note,
          userPassword:this.previousPassword,
        }
      })
          .then(function (response) {
            console.log(this.previousPassword)
            console.log(response)

          })
          .catch(function (error) {
            console.log(error);
          });
    },
    updatePassword(){
      const  _this=this
      if(this.previousPassword_input == "" || this.newPassword_1==""||this.newPassword_2==""){
        ElMessage({
          message:"旧密码、新密码或确认密码不能为空",
          type:'warning'
        })
      }else if (this.previousPassword_input!=this.previousPassword){
        ElMessage({
          message:"旧密码输入错误，请重新输入",
          type:'warning'
        })
      }else if (this.previousPassword_input==this.newPassword_1){
        ElMessage({
          message:"新密码不能与旧密码一致",
          type:'warning'
        })
      }else if(this.newPassword_1==this.newPassword_2){
        axios({
          method: 'post',
          url: 'http://localhost:8081/updateUser',
          params: {
            userName:this.username,
            name:this.name,
            age:this.age,
            sex:this.sex,
            phone:this.phone,
            note:this.note,
            userPassword:this.newPassword_1,
          }
        })
            .then(function (response) {
              console.log(response)
              _this.showPasswordBox=false;
              ElMessage({
                message:"修改密码成功,请重新登录",
                type:'success'
              })
              _this.$router.push({path: '/login',name:'login', query: {}});

            })
            .catch(function (error) {
              console.log(error);
            });


      }else {
        ElMessage({
          message:"两次输入的密码不一致，请重新输入",
          type:'warning'
        })
      }
    },
    loginOut(){
      this.$router.push("/login")
    },
    down() {
      document.getElementById("avatar").style.animation="falling 0.3s linear"
      document.getElementById("avatar").style.animationFillMode="forwards"
    },
    up(){
      document.getElementById("avatar").style.animation="up 0.3s linear"
      document.getElementById("avatar").style.animationFillMode="forwards"
    },
    editBase(){
      this.dialogTableVisible=true;
    },
    AccountCancellation(){
       const  cancel=confirm("是否注销")
      if(cancel==true){
        axios({
          method: 'post',
          url: 'http://localhost:8081/accountCancel',
          params: {
            Admin:this.username
          }
        })
            .then(function (response) {
              console.log(response)
            })
            .catch(function (error) {
              console.log(error);
            });
      }

    },
    send(){
      this.now_edit_massage.push(this.massage_text)
      axios({
        method: 'post',
        url: 'http://localhost:8081/sendMassage',
        params: {
          senderAdmin:this.username,
          senderName:this.name,
          receiverAdmin:this.senderAdmin,//sender变为接收者
          message:this.massage_text,
          isRead:"0"
        }
      })
          .then(function (response) {
            console.log(response)
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    chat(senderAdmin,sender){
      this.senderAdmin=senderAdmin
      this.senderName=sender
      this.now_edit_massage.length=0
      this.senderMassage_array.length=0
      this.receiverMassage_array.length=0
   /*   this.senderAdmin=this.tableData.at(index).friendUsername
      this.senderName=this.tableData.at(index).friendName*/
      const _this = this//将全局变量赋值到局部
      this.showMassageBox=true;
      //对方发送的所有消息
      axios({
        method: 'post',
        url: 'http://localhost:8081/showMassageBySender',
        params: {
          senderAdmin:senderAdmin,
          receiverAdmin:this.username
        }
      })
          .then(function (response) {
            console.log(response.data)
            console.log(response.data.length)
            console.log(response.data.at(0).message)
            for (let i = 0; i <response.data.length; i++) {
              _this.senderMassage_array[i]=response.data.at(i).message
            }
            console.log(_this.senderMassage_array)

          })
          .catch(function (error) {
            console.log(error);
          });
      //我发送的所有消息
      axios({
        method: 'post',
        url: 'http://localhost:8081/showMassageBySender',
        params: {
          senderAdmin:this.username,
          receiverAdmin:senderAdmin
        }
      })
          .then(function (response) {
            console.log(response.data)
            for (let i = 0; i <response.data.length; i++) {
              _this.receiverMassage_array[i]=response.data.at(i).message
            }
            console.log(_this.receiverMassage_array)
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    BeenRead(){
      document.getElementById("message-logo").style.animation="none"
      // this.$refs["message-logo"].style.animationPlayState="paused"
      this.tip="暂无消息，快找小伙伴聊天吧"
      this.read=false
      axios({
        method: 'post',
        url: 'http://localhost:8081/beenRead',
        params: {
          receiverId:this.id
        }
      })
          .then(function (response) {
            console.log(response.data); // 前台调试能够看到获取到数据了

          })
          .catch(function (error) {
            console.log(error);
          });
    }},

    created() {


      this.friendGuide="/friendGuide?" + "username=" + this.$route.query.username
      this.zone = "/zone?" + "username=" + this.$route.query.username
      this.hello="/hello"
      this.username = this.$route.query.username
      const _this = this

      axios({
        method: 'post',
        url: 'http://localhost:8081/showCommentByAdmin',
        params: {
          userName:this.username
        }
      })
          .then(function (response) {
            console.log(response.data); // 前台调试能够看到获取到数据了
            for (let i = 0; i <response.data.length ; i++) {
              _this.commentName_array[i]=response.data.at(i).commentName;
              _this.comment_array[i]=response.data.at(i).comments;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      //根据username查询用户信息
      axios({
        method: 'post',
        url: 'http://localhost:8081/showUserByAdmin',
        params: {
          userName: this.username
        }
      })
          .then(function (response) {

            console.log(response.data); // 前台调试能够看到获取到数据了
            _this.id=response.data.at(0).userId;
            _this.name = response.data.at(0).name;
            _this.sex = response.data.at(0).sex;
            _this.phone = response.data.at(0).phone;
            _this.note = response.data.at(0).note;
            _this.age = response.data.at(0).age;
            _this.previousPassword = response.data.at(0).userPassword;
            // alert( _this.previousPassword);

          })
          .catch(function (error) {
            console.log(error);
          });
      axios({
        method: 'post',
        url: 'http://localhost:8081/showMassage',
        params: {
          receiverAdmin:this.username
        }
      })
          .then(function (response) {
            console.log(response.data); // 前台调试能够看到获取到数据了
            console.log(response.data.length)


            for (let i = 0; i <=response.data.length ; i++) {
              if(response.data.at(i).isRead==0){
                _this.senderAdmin_array[i]=response.data.at(i).senderAdmin
                _this.sender_array[i]=response.data.at(i).senderName
                _this.massage_array[i]=response.data.at(i).message
              }
            }
          })
          .catch(function (error) {
            console.log(error);
          });
    }
}
</script>

<style>
.avatar{
  position: relative;
 margin-left: 10px;
}
.drawer-head{
  height: 200px;
  width: 200px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  /*align-items: center;*/
}
.card-body{
  /*让所有子盒子换行*/
  flex-wrap: wrap;
  float: left;
  justify-content: space-between;
  /*align-items: center;*/
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 30px;
}
.box-card {
  width: 440px;
}
.el-menu-demo{
  /*background-color: transparent;*/
  position: relative;
  height: 60px;
  z-index: 2;
  border-bottom: solid 0.5px #fff;
  font-size: 50px;
}
.frame{
    position: relative;
    top:-70px;

 }
 .guide{
   z-index: 2;

 }
.message-tip{
  border-top: 1px  solid silver;
  height: 45px;
  color: #888888;
 }
 .message-operate{

 }
/* 闪烁动效*/
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
      transform: scale(1.5);
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }
.blink {
  animation: blink 1.5s infinite;

}

.avatar {
    position: relative;

  }
.box-chat1{
  width: 500px;
  height: 400px;
  /*border: solid 1px;*/
  margin-right: 10px;
  /*margin-left: 100px;*/
  background-color: #FFFFFF;
}
.box-chat1-left{
  position: absolute;
  width: 250px;
  height: 400px;
  /*border: solid 1px;*/
  float: left;
}

.box-chat1-right{
  width: 250px;
  height: 400px;
  /*border: solid 1px;*/
  float: right;
}
.box-chat2{
  /*margin-left: 100px;*/
}
.box-chat2{
  width: 500px;
  height: 100px;
  border: solid 1px;
}
/*气泡*/
.pop {
  position: absolute;
  float: left;
  width:100px;
  height:35px;
  line-height: 33px;
  /*background:#fff;*/
  color:#fff;
  border-radius:5px; /* 圆角 */
  background-color: #4D4948;
  border:1px solid #4D4948;
  margin-left: 55px;
  margin-top: 10px;

}
/*尖角在左侧*/
.pop .arrow {
  position:absolute;

  top:5px;
  left:-20px; /* 圆角的位置需要细心调试哦 */
  width:0;
  height:0;
  font-size:0;
  border:solid 8px;
  border-color:#fff #4D4948 #fff #fff;
}
/*气泡*/
.pop2 {
  position: relative;
  float: right;
  width:100px;
  height:35px;
  line-height: 33px;
  /*background:#fff;*/
  color:#fff;
  border-radius:5px; /* 圆角 */
  background-color: lightskyblue;
  margin-right: 20px;
  margin-top: 10px;
  border: none;

}
/*尖角在左侧*/
.pop2 .arrow2 {
  position:absolute;
  top:5px;
  left:105px; /* 圆角的位置需要细心调试哦 */
  width:0;
  height:0;
  font-size:0;
  border:solid 8px;
  border-color:#fff #fff #fff lightskyblue  ;
}
.box-text{
  width: 500px;
  height: 100px;
 border: none;
}

@keyframes falling {
  0% { top: 0px; }
100% { top: 20px; }
}
@keyframes up {
  0% { top: 20px; }
  100% { top: 0px; }
}
</style>
